<!--
 * @Description: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-09-15 15:05:49
 * @LastEditors: GGB
 * @LastEditTime: 2022-09-15 18:08:39
-->
<template>
  <a-collapse :style="bodyStyle" :default-active-key="show ? '1' : '0'" :bordered="false">
    <template #expandIcon="{ isActive }">
      <div style="font-size: 14px">
        {{ title || (isActive ? '收起' : '展开') }}
        <a-icon theme="outlined" type="right" :rotate="isActive ? 90 : 0" />
      </div>
    </template>
    <a-collapse-panel key="1" :style="customStyle">
      <div class="collapse-body">
        <slot />
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
/**
 * Collapse 折叠面板
 * @description 项目定制的折叠面板
 * @tutorial https://1x.antdv.com/components/collapse-cn/
 * @property {Object} bodyStyle 整体的样式
 * @property {Object} customStyle 内部样式
 * @property {String} title 标题
 * @property {Boolean} show 是否一开始就展开
 */
export default {
  name: 'Collapse',
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
    },
    bodyStyle: {
      type: Object,
      default: () => ({
        padding: '5px',
        border: '1px dashed #4685fd',
        backgroundColor: 'white',
      }),
    },
    customStyle: {
      type: Object,
      default: () => ({
        borderRadius: '4px',
        marginBottom: '0px!important',
        border: 0,
        overflow: 'hidden',
      }),
    },
  },
}
</script>

<style lang="less" scoped>
.collapse-body {
  display: flex;
  flex-direction: column;
}
</style>
